<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单详情</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="__CSS__/amazeui.min.css"/>
    <link rel="stylesheet" href="__CSS__/style.css"/>
    <script src="__JS__/jquery.min.js"></script>
    <script src="__JS__/amazeui.min.js"></script>

</head>
<body>
<style type="text/css">
    body {
        background-color:#f2f2f2;
    }
    div {
        background:white;
    }
    .top-box {
        padding:5px;
        background-color: #F8B600;
    }

    .express-box {
        position:relative;
        padding:10px;
        border-bottom: 1px solid #f3f3f3;
    }
    .express-main::after {
        display: inline-block;
        font: normal normal normal 1.6rem/1 FontAwesome,sans-serif;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transform: translate(0,0);
        content: "\f054";
        position: absolute;
        right: 10px;
        color: #CCC8C8;
        top: 50%;
        margin-top: -8px;
    }
    .express-box-left {
        float:left;
        padding:15px;
        width:20%;
    }
    .express-box-right {
        float:left;
    }
    .express-box-right p {
        margin:0 !important;
    }
    .e-color {
        color:#42bcbd;
    }

    .address-box {
        padding:10px;
        border-bottom: 1px solid #f3f3f3;
    }
    .address-box-left {
        float:left;
        width:20%;
        padding:7px;
    }
    .address-box-left img {
        width:100%;
        padding:10px;
    }
    .address-box-right {
        float:left;
        width:78%;
    }
    .address-box-right p{
        margin:0 !important;
    }

    .product-box {
        margin-top:15px;
    }
    .order-li {
        position: relative;
        border-top:1px solid #f3f3f3;
        margin-bottom: 15px;
        background-color:white;
    }
    .order-top-box{
        padding-left:10px;
        padding-top:5px;
        padding-bottom: 5px;
        margin-left:10px;
        margin-right:10px;
        border-bottom: 1px solid #f3f3f3;
        color:#6E6F70;
        font-size: 14px;
    }
    .order-status {
        float:right;
        margin-right:10px;
        color:#707172;
    }
    .order-detail {
        width:100%;
    }

    .order-detail::after {
        display: inline-block;
        font: normal normal normal 1.6rem/1 FontAwesome,sans-serif;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transform: translate(0,0);
        content: "\f054";
        position: absolute;
        right: 10px;
        color: #ccc;
        top: 50%;
        margin-top: -8px;
    }

    .order-info {
        display: inline-block;
    }
    .order-info h6,.order-info p {
        margin:0 !important;
    }
    .order-info-price {
        color:#E93E50;
    }
    .order-info-num {
        color:#91929A;
    }

    .order-c-img{
        margin:5px;
        margin-left:15px;
        display: inline-block;
        width:34%;
    }
    .order-c-img img {
        width:100%;
        padding:2px;
        border:1px solid #DADADA;
    }
    .p-color {
        color:#f7864a;
    }
    .remarks-box {
        padding:10px;
        border-bottom: 1px solid #f3f3f3;
    }
    .r-color {
        color:#8f8f8f;
    }
    .order-info-box {
        padding:20px;
        margin-top:15px;
        margin-bottom: 50px;
    }
    .after-sale-box {
        padding:20px;
        margin-top:15px;
    }
    .confirm-box {
        color:white !important;
        padding-top:10px;
        padding-bottom:10px;
        position: fixed;
        bottom: 0px;
        width: 100%;
        z-index: 999;
        background-color: #F8B600;
    }
    .confirm-box a {
        display: inline-block;
        padding-top:10px;
        padding-bottom:10px;
        color:white;
        width:50%;
    }


</style>
<div class="top-box">
    <center>

        <if condition="$pay_status eq 0">
            <img src="__IMG__/ddaifu.png" width="40px">
            <span class="am-vertical-align-middle" style="margin-left:3px;color:white">待付款</span>
        </if>

        <if condition="($pay_status eq 1) and ($order_status eq 2)">
            <img src="__IMG__/daiqueren.png" width="40px">
            <span class="am-vertical-align-middle" style="margin-left:3px;color:white">待确认</span>
        </if>
        <if condition="($pay_status eq 1) and ($order_status eq 3)">
            <img src="__IMG__/faifahuo.png" width="40px">
            <span class="am-vertical-align-middle" style="margin-left:3px;color:white">待发货</span>
        </if>

        <if condition="($pay_status eq 1) and ($order_status eq 4)">
            <img src="__IMG__/wait-get.png" width="40px">
            <span class="am-vertical-align-middle" style="margin-left:3px;color:white">待收货</span>
        </if>

        <if condition="($pay_status eq 1) and ($order_status eq 5)">
            <img src="__IMG__/wancheng.png" width="40px">
            <span class="am-vertical-align-middle" style="margin-left:3px;color:white">完成</span>
        </if>

    </center>
</div>

<div class="address-box am-cf">
    <div class="address-box-left">
        <img src="__IMG__/shdz.png">
    </div>
    <div class="address-box-right">
        <p>收货人：{$contactname}  {$mobile}</p>
        <p>收货地址：{$province}{$city}{$area}{$detailinfo}</p>
    </div>
</div>
<div class="product-box">
    <div class="order-li">
        <div class="order-top-box am-text-lg">
            订单号：{$order_code}
            <span class="order-status">
                <if condition="$order_status eq 0">
                    待付款
                </if>

                <if condition="$order_status eq 3">
                    待发货
                </if>

                <if condition="$order_status eq 4">
                    待收货
                </if>

                 <if condition="$order_status eq 5">
                    收货成功
                </if>

            </span>
        </div>
        <volist name="items" id="vo">

            <a class="order-detail" href="{:U('Index/detail',array('id'=>$vo['p_id']))}">
                <div class="order-c-img">
                    <img src="{$vo['img_url']}">
                </div>
                <div class="order-info">
                    <h6>千岛湖鱼头</h6>
                    <p><span class="order-info-price">￥{$vo['price']}</span><span class="order-info-num">共{$vo['count']}件商品</span></p>
                </div>
            </a>

        </volist>
        <hr data-am-widget="divider" style="margin-left:10px;margin-right:10px;" class="am-divider am-divider-dashed" />
        <div class="remarks-box">
            <table style="width:100%;" cellpadding="10">
                <tr>
                    <td>备注:</td><td class="am-text-left r-color" style="font-size:12px;">{$note}</td>
                </tr>
            </table>
        </div>
        <div class="allprice-box am-text-right">
            <span class="p-color">共计{$all_count}件商品，合计{$price}元（包邮）</span>
        </div>
    </div>
</div>
<!--查看售后情况-->

<if condition="($cs_status eq 2)or($cs_status eq 3)">
    <div class="after-sale-box">
        <table>
            <tr>
                <td width="30%">售后状态：</td><td class="r-color">受理完成</td>
            </tr>
            <tr>
                <td width="30%">商家回应：</td><td class="r-color">好的我们我们会尽快给你办理退款处理</td>
            </tr>
        </table>
    </div>
</if>

<div class="order-info-box">
    <table>
        <tr>
            <td>订单编号：</td><td class="r-color">{$order_code}</td>
        </tr>
        <tr>
            <td>交易方式：</td>
            <td class="r-color">
                <if condition="pay_type eq 2">微信支付</if>
                <if condition="pay_type eq 3">储值支付</if>
            </td>
        </tr>
        <tr>
            <td>下单时间：</td><td class="r-color">{$createtime|date='Y-m-d H:i:s',###}</td>
        </tr>
        <if condition="$order_status eq 4">
            <tr>
                <td>发货时间：</td><td class="r-color">{$express.createtime|date='Y-m-d H:i:s',###}</td>
            </tr>
        </if>

        <if condition="$order_status eq 5">
            <tr>
                <td>收货时间：</td><td class="r-color">{$updatetime|date='Y-m-d H:i:s',###}</td>
            </tr>
        </if>


    </table>
</div>



<if condition="$pay_status eq 0">
    <table class="confirm-box am-text-center">
        <tr>
            <td><a  href="{:U('TestPay/jsapi',array('order_code'=>$order_code))}">去支付</a></td>
            <td><a href="{:U('Order/wait_order',array('order_code' => $order_code))}" class="cancel-btn">取消订单</a></td>
        </tr>
    </table>
</if>

<if condition="$order_status eq 3">
    <a href="{:U('Order/afterSale',array('order_code'=>$order_code))}" class="confirm-box am-text-center">申请售后</a>
</if>


<if condition="$order_status eq 4">
    <table class="confirm-box am-text-center">
        <tr>
            <td><a href="http://m.kuaidi100.com/index_all.html?type={$express['expresscode']}&postid={$express['expressno']}" >查看物流</a></td>
            <td><a data-href="{:U('Order/confirm_receipt',array('order_code' => $co['order_code']))}" class="confirm-receipt">确认收货</a></td>
        </tr>
    </table>
</if>



<script type="text/javascript">

    $(function() {
        $(".confirm-receipt").bind("click", function () {
            var url = $(this).attr('data-href');

            $('#my-confirm').modal({
                relatedTarget: this,
                onConfirm: function (options) {
                    $.get(url, function (msg) {
                        if (msg) {
                            $('#my-alert').modal();
                            $('#tip-content').text('确认收货成功');
                        } else {
                            $('#my-alert').modal();
                            $('#tip-content').text('确认收货失败');
                        }
                    });
                },

            });

        });

        $(".cancel-btn").bind("click", function () {
            var url = $(this).attr('data-href');
            $('#my-confirm .am-modal-bd').text('您确认要取消订单？');
            $('#my-confirm').modal({
                relatedTarget: this,
                onConfirm: function (options) {
                    $.get(url, function (msg) {
                        if (msg) {
                            $('#my-alert').modal();
                            $('#tip-content').text('订单取消成功');
                        } else {
                            $('#my-alert').modal();
                            $('#tip-content').text('订单取消失败');
                        }
                    });
                },

            });

        });

    })
</script>
<!--模态弹窗-->
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm" style="display: none;">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">系统提醒</div>
        <div class="am-modal-bd">
            您确定收货吗？
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">系统提醒</div>
        <div class="am-modal-bd" id="tip-content">
            Hello world！
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" onclick="window.location.reload();">确定</span>
        </div>
    </div>
</div>
</body>
</html>